<template>
<h1>EL组件-开关</h1>
  <el-switch v-model="value1" />
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />
  <br>
  <el-switch v-model="isShow"></el-switch>
  <el-switch v-model="isShow2"></el-switch>
  <hr>
  <img src="cg.png" width="200" v-if="isShow">
  <img src="lyf.jpg" width="200" v-if="isShow2">
  <!-- active-value设置开关打开的值 inactive-value设置开关关闭的值 -->
  <!-- 如果没有属性绑定,属性值默认就被看作一个普通的字符串 -->
  <el-switch v-model="numStr" active-value="1" inactive-value="0"></el-switch>
  <!-- 如果进行了属性绑定,'1'才可以被看作是字符串类型的1 -->
  <el-switch v-model="numStr" :active-value="'1'" inactive-value="'0'"></el-switch>
  <!-- 当num是数字类型时,就需要属性绑定,否则1会被看作是字符串,无法生效 -->
  <el-switch v-model="num" :active-value="1" :inactive-value="0"></el-switch>
</template>

<script setup>
import { ref } from 'vue'

const value1 = ref(true)
const value2 = ref(false)
const isShow = ref(true);
const isShow2 = ref(true);
const numStr = ref('1');
const num = ref(1);
</script>

<style scoped>

</style>